﻿<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>验证表单</title>
 <style>
    .box{
        width:400px;
        padding:40px;
        border:solid 1px #666;
        margin:100px auto 0;
        line-height:40px;
    }
    
    .box ul li{
        list-style: none;
    }
    #title{
        text-align: center;
    }
    label{
        display:inline-block;
        width:20%;
        }
    input{
        width:60%;
        }

 </style>
</head>
<body>

<div class="box">
    <ul>
        <li id="title">个人表单信息验证</li>
        <li>
            <label for="Phone">手机：</label>
            <input type="number" id="Phone">
            <span></span>
        </li>

        <li>
          <label for="Email">邮箱：</label>
          <input type="text" id="Email">
          <span></span>
         </li>
 
        <li>
         <label for="Name">姓名：</label>
         <input type="text" id="Name">
         <span></span>
        </li>
    </ul>

</div>

</body>
<script>
 (function(window){
 function $(id){
  return document.getElementById(id);
 };
 // 获取对象
 var iptPhone = $("Phone");
 var iptEmail = $("Email");
 var iptName = $("Name");

 var rxPhone = /^(13[0-9]|15[012356789]|18[0-9]|17[678]|14[57])[0-9]{8}$/;
 var rxEmail = /^\w+@\w+\.\w+$/;
 var rxName = /^[\u4E00-\u9FA5]{2,}$/;

 // 验证手机号
 inspect(Phone,rxPhone);
 // 验证邮箱
 inspect(Email,rxEmail);
 // 验证姓名
 inspect(Name,rxName);

 function inspect(element,regExp){
  element.onblur = function(){
  var text = this.value;
  if( regExp.test( text ) ){
   this.nextElementSibling.innerHTML = "正确"
   this.nextElementSibling.style.color = "green";
  }else{
   this.nextElementSibling.innerHTML = "错误"
   this.nextElementSibling.style.color = "red";
  }
  }
 }
 })(window)
</script>
</html>